<template>
  <div class="canContainer">
    <canvas id="drawnContainer" width="680" height="420"></canvas>
    <canvas id="drawY"></canvas>
    <canvas id="drawX" @mousedown="getPoint"></canvas>
    <div class="showBox" v-show="showBox">
      <p>时间：{{ time }} s</p>
      <p>频率：{{ range }} Hz</p>
      <p>幅度：{{ db }} dB</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DrawCpn',
  props: ['dataArray'],
  data () {
    return {
      ctx: null,
      tempCanvas: null,
      tempX: null,
      virX: null,
      ctxX: null,
      tempY: null,
      ctxY: null,
      width: 1,
      height: 1,
      tick: 12,//间隙
      Y: 0, // 频率
      currentTime: 0,//当前时长
      spaceTime: 0,//一次绘图时间间隔
      speed: 1,
      originW: 30,
      originH: 20,
      transData: [],
      dbData: [],
      showBox: false,
      time: 15.02,
      range: 24400,
      db: -110,
    }
  },
  watch: {
    dataArray: {
      handler (val) {
        this.Y = 2001
        let arr = []
        for (let i = 0; i < 2; i++) {
          for (let j = this.Y * 4 * i; j < this.Y * 4 * (i + 1); j++) {
            arr.push(val[j])
          }
          this.transData.push(arr)
          arr = []
        }
        this.superPlus(this.transData)  //绘制语谱图
        this.currentTime += 1 //时间
        //this.createLabelX() //绘制X
        this.transData = []

        //   if (this.dbData.length < 16 * val.data.length) {
        //     for (let i = 0; i < val.data.length; i++) {
        //       this.dbData.push(val.data[i])
        //     }
        //   } else {
        //     this.dbData.splice(0, val.data.length)
        //     for (let i = 0; i < val.data.length; i++) {
        //       this.dbData.push(val.data[i])
        //     }
        //   }
      },
      deep: true
    },
  },
  methods: {
    superPlus (arr) {
      this.tempCanvas.width = this.width
      this.tempCanvas.height = this.height
      const tempCtx = this.tempCanvas.getContext('2d')

      tempCtx.drawImage(document.querySelector('#drawnContainer'), 0, 0, this.width, this.height)
      // Iterate over the frequencies.
      const imageData = new ImageData(arr.length, arr[0].length / 4)

      const imageDataNew = new ImageData(arr.length, arr[0].length / 4)

      for (let j = 0; j < arr[0].length; j += 4) {  //列
        for (let i = 0; i < arr.length; i++) {     //行
          //竖着遍历
          imageData.data[j * (arr.length) + i * 4 + 0] = arr[i][j]
          imageData.data[j * (arr.length) + i * 4 + 1] = arr[i][j + 1]
          imageData.data[j * (arr.length) + i * 4 + 2] = arr[i][j + 2]
          imageData.data[j * (arr.length) + i * 4 + 3] = arr[i][j + 3]
        }
      }

      for (let i = 0, h = imageData.height; i < h; i++) {
        for (let j = 0, w = imageData.width; j < w; j++) {
          imageDataNew.data[i * w * 4 + j * 4 + 0] = imageData.data[(h - i) * w * 4 + j * 4 + 0]
          imageDataNew.data[i * w * 4 + j * 4 + 1] = imageData.data[(h - i) * w * 4 + j * 4 + 1]
          imageDataNew.data[i * w * 4 + j * 4 + 2] = imageData.data[(h - i) * w * 4 + j * 4 + 2]
          imageDataNew.data[i * w * 4 + j * 4 + 3] = imageData.data[(h - i) * w * 4 + j * 4 + 3]
        }
      }

      createImageBitmap(imageDataNew).then(res => {
        // ctx.clearRect(0, 0, 1100, 300)
        this.ctx.drawImage(res, 0, 0, arr.length, arr[0].length / 4, this.width - arr.length, 0, arr.length, this.height - this.originH)
        // Translate the canvas.
        this.ctx.translate(-arr.length, 0)
        // Draw the copied image.
        this.ctx.drawImage(this.tempCanvas, 0, 0, this.width, this.height, 0, 0, this.width, this.height)
        // Reset the transformation matrix.
        this.ctx.setTransform(1, 0, 0, 1, 0, 0)
      })
    },

    // createLabelX () {
    //   this.ctxX.clearRect(0, 0, this.width, this.height)
    //   for (let i = 0; i < this.currentTime; i++) {
    //     this.ctxX.fillStyle = '#fff'
    //     this.ctxX.font = '9px Inconsolata'
    //     this.ctxX.textAlign = 'right'
    //     this.ctxX.fillText(this.currentTime - i, this.width - 42 * i, this.height - 5)
    //   }
    // },

    createLabel () {
      this.ctxY.fillStyle = 'rgba(0,0,0,0)'
      for (let i = 0; i <= this.tick; i++) {
        this.ctxY.fillStyle = '#fff'
        this.ctxY.font = '9px Inconsolata'
        this.ctxY.textAlign = 'left'
        this.ctxY.fillText(i * 2000, 5, this.height - this.height / (this.tick) * i - this.originH)
      }
    },

    getPoint (e) {
      if (this.currentTime > 16) {
        let p = document.querySelector('#drawnContainer')
        let box = p.getBoundingClientRect()
        let x = e.pageX - box.left
        let y = e.pageY - box.top

        this.range = parseInt(220000 / (box.height - 20) * (box.height - y) + '')
        this.time = ((this.currentTime - 16) + x / box.width * 16).toFixed(2)

        let index = parseInt(x / 16 / box.width + y / box.height * 2400 * 42)
        this.db = (20 * Math.log10(this.dbData[index])).toFixed(2)
        this.showBox = true
        setTimeout(() => {
          this.showBox = false
        }, 2500)
      }
    }
  },
  mounted () {

    this.tempCanvas = document.createElement('canvas')

    this.ctx = document.querySelector('#drawnContainer').getContext('2d')
    this.ctx.fillStyle = 'rgba(0,0,0,1)'
    this.ctx.fillRect(0, 0, this.width, this.height) //背景
    this.width = document.querySelector('#drawnContainer').width
    this.height = document.querySelector('#drawnContainer').height

    this.virX = document.createElement('canvas')
    this.tempX = document.querySelector('#drawX')
    this.tempX.width = this.width
    this.tempX.height = this.height
    this.ctxX = this.tempX.getContext('2d')

    this.tempY = document.querySelector('#drawY')
    this.tempY.width = this.width
    this.tempY.height = this.height
    this.ctxY = this.tempY.getContext('2d')
    this.createLabel() //绘制Y轴
  }
}
</script>

<style scoped lang="less">
.canContainer {
  width: 100%;
  height: 100%;
  position: relative;

  #drawnContainer {
    position: absolute;
    top: 55.5%;
    left: 50.5%;
    transform: translate(-50%, -50%);
    display: block;
    width: 1020px;
    height: 580px;
    background-color: black;
  }

  #drawY {
    position: absolute;
    top: 55.5%;
    left: 50.5%;
    transform: translate(-50%, -50%);
    width: 1020px;
    height: 580px;
    //border: 1px solid bisque;
    z-index: 111;
  }

  #drawX {
    position: absolute;
    top: 55.5%;
    left: 50.5%;
    transform: translate(-50%, -50%);
    width: 1020px;
    height: 580px;
    //border: 1px solid red;
    z-index: 120;
  }

  .showBox {
    background-color: #0f3840;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-evenly;
    color: #fff;
    width: 120px;
    height: 120px;
    position: absolute;
    top: 55%;
    left: 50%;
    font-size: 14px;
    transform: translate(-50%, -50%);
    z-index: 260;
  }
}
</style>
